<template>
	<view class="mechant-process">
		<!-- <uni-easyinput class="uni-mt-5" trim="all" suffixIcon="search" v-model="applymentId" placeholder="输入业务申请编号"
			@iconClick="applymentIdSearch"></uni-easyinput> -->
		<!-- <view class="no-merchant-tip" v-if="!isMerchantStateShow">
			<uni-icons type="info" size="30" color="#999"></uni-icons>
			<span class="text">{{ textTips }}</span>
		</view> -->
		<view class="merchant">
			<p><span>申请时间：</span>{{merchantData.createTime}}</p>
			<p><span>业务申请编号：</span>{{merchantData.applyment_id}}</p>
			<p v-if="merchantData.busifavorApplymentVo.applymentState == 'APPLYMENT_STATE_EDITTING'">
				<span>申请单状态：</span>编辑中（提交申请发生错误导致，请尝试重新提交）
			</p>
			<p v-else-if="merchantData.busifavorApplymentVo.applymentState == 'APPLYMENT_STATE_AUDITING'">
				<span>申请单状态：</span>审核中（申请单正在审核中，超级管理员用微信打开“签约链接”，完成绑定微信号后，申请单进度将通过微信公众号通知超级管理员，引导完成后续步骤）
			</p>
			<p v-else-if="merchantData.busifavorApplymentVo.applymentState == 'APPLYMENT_STATE_REJECTED'">
				<span>申请单状态：</span>已驳回（请按照驳回原因修改申请资料，超级管理员用微信打开“签约链接”，完成绑定微信号，后续申请单进度将通过微信公众号通知超级管理员）
			</p>
			<p v-else-if="merchantData.busifavorApplymentVo.applymentState == 'APPLYMENT_STATE_TO_BE_CONFIRMED'">
				<span>申请单状态：</span>待账户验证（请超级管理员使用微信打开返回的“签约链接”，根据页面指引完成账户验证）
			</p>
			<p v-else-if="merchantData.busifavorApplymentVo.applymentState == 'APPLYMENT_STATE_TO_BE_SIGNED'">
				<span>申请单状态：</span>待签约（请超级管理员使用微信打开返回的“签约链接”，根据页面指引完成签约）
			</p>
			<p v-else-if="merchantData.busifavorApplymentVo.applymentState == 'APPLYMENT_STATE_SIGNING'">
				<span>申请单状态：</span>开通权限中（系统开通相关权限中，请耐心等待）
			</p>
			<p v-else-if="merchantData.busifavorApplymentVo.applymentState == 'APPLYMENT_STATE_FINISHED'">
				<span>申请单状态：</span>已完成（商户入驻申请已完成）
			</p>
			<p v-else-if="merchantData.busifavorApplymentVo.applymentState == 'APPLYMENT_STATE_CANCELED'">
				<span>申请单状态：</span>已作废（申请单已被撤销）
			</p>
			<p><span>申请单描述：</span>{{merchantData.applyment_state_msg}}</p>
			<uni-section title="驳回原因详情" type="line"
				v-if="merchantData.audit_details && merchantData.audit_details.length > 0">
				<uni-group mode="card">
					<view v-for="(item, index) in merchantData.audit_details" :key="index">
						{{ item.field_name }}：{{ item.reject_reason }}
					</view>
				</uni-group>
			</uni-section>
			<p v-if="merchantData.sub_mchid"><span>特约商户号：</span>{{merchantData.sub_mchid}}</p>
			<div class="sign-url-section"
				v-if="merchantData.sign_url && merchantData.applyment_state != 'APPLYMENT_STATE_FINISHED'">
				<div class="text">超级管理员签约链接：</div>
				<div class="sign-url-img-box">
					<image class="sign-url-img" show-menu-by-longpress :src="merchantData.sign_url" mode="aspectFit">
					</image>
					<span class="qrcode-text">长按二维码识别</span>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				shopId: "",
				isProcess: "",
				merchantData: {},
				applymentId: "",
				isMerchantStateShow: false,
				textTips: "请联系技术支持获取业务申请编号查询"
			}
		},
		onLoad(opts) {
			const tokenInfo = uni.getStorageSync("tokenInfo");
			if (tokenInfo) {
				this.shopId = tokenInfo.shopId;
			} else {
				if (opts) {
					this.shopId = opts.shopId;
				}
			}

			this.applymentIdSearch();
		},
		methods: {
			applymentIdSearch() {
				const that = this;
				getApp().showLoading();
				let p1 = new Promise((resolve, reject) => {
					apiRqs._queryMerchantProcess(that.shopId).then((res) => {
						resolve(res);
					}).catch((err) => {
						reject(err);
					})
				})

				p1.then((result) => {
					console.log("接收到的商户申请状态", result);
					if (result.data.state === 'Fail') {
						uni.hideLoading();
						uni.showToast({
							title: `未查询到申请记录`,
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 2000)
					} else {
						apiRqs._queryApplymentIdState(result.data.busifavorApplymentVo.applymentId).then((res) => {
							uni.hideLoading();

							if (res.data.resultCode.stateCode === "200") {
								this.isMerchantStateShow = true;
								this.merchantData = Object.assign({}, result.data.busifavorApplymentVo, res
									.data);
								console.log("业务申请编号查询结果", this.merchantData);
							} else {
								this.isMerchantStateShow = false;
								uni.showToast({
									title: `${res.data.applyment_state_msg}`,
									icon: 'none'
								})
							}
						})
					}

				})
			},
		},
		// 分享给好友
		onShareAppMessage() {
			return {
				title: "商户申请入驻进度查询",
				path: `packageD/coupon/merchant-process?shopId=${ this.shopId }`
			}
		},
	}
</script>

<style lang="less">
	.mechant-process {
		margin: 20px;

		.no-merchant-tip {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 40px;

			.text {
				font-size: 12px;
				color: #999;
				margin-top: 8px;
			}

		}

		.merchant {
			margin-top: 12px;

			p {
				font-size: 13px;
				color: #777;
				margin: 10px 0;

				span {
					font-size: 13px;
					color: #000;
					font-weight: 600;
				}

			}

			.sign-url-section {
				margin: 10px 0;

				.text {
					font-size: 13px;
					color: #000;
					font-weight: 600;
				}

				.sign-url-img-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.sign-url-img {
						width: 200px;
						height: 200px;
						object-fit: contain;
					}

					.qrcode-text {
						font-size: 12px;
						color: #999;
					}
				}

			}
		}
	}
</style>